<script setup>

import UNavbar from "../../uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {gameDetail} from "../../request/api";

const raceId = ref(0);//比赛id
const raceDetail = ref({});//比赛详情
onLoad(query => {
  raceId.value = query.id;
  getDetail();
});

//获取详情
const getDetail = () => {
  gameDetail({
    id: raceId.value
  }).then(res => {
    raceDetail.value = res.data;
  })
}
const toUserPage = (mobile) => {
  uni.navigateTo({
    url:`/pages/other-user/other-user?mobile=${mobile}`
  })
}
</script>

<template>
  <view class="race-detail">
    <u-navbar placeholder title="比赛详情"></u-navbar>
    <view class="desc">
      <view class="count">
        <text>比赛序号：{{ raceDetail.sort }}</text>
        <text>局数：{{ raceDetail.jushu }}</text>
        <text>盘数：{{ raceDetail.panshu }}</text>
        <text>地址：{{ raceDetail.didian }}</text>
      </view>
      <view class="time">
        <text>{{ raceDetail.riqi }}</text>
        <image src="/static/cover.png"></image>
      </view>
    </view>
    <view class="ranking">
      <view class="title">
        <text>成绩</text>
        <text>运动员</text>
        <text>排名</text>
        <text>积分</text>
        <text>得分</text>
      </view>

      <view class="item">
        <view class="user">
          <image src="/static/first.png"></image>
          <view @click="toUserPage(raceDetail.dy_mobile)">
            <image :src="raceDetail.dy_image || '/static/cover.png'"></image>
            <text>{{ raceDetail.diyi }}</text>
          </view>
          <view>{{ raceDetail.dy_pm }}</view>
          <view>{{ raceDetail.dy_jifen }}</view>
          <view>{{ raceDetail.dy_defen }}</view>
        </view>
        <view class="count">
          <text>放炮数:{{ raceDetail.dy_fps }}</text>
          <text>放炮率:{{ raceDetail.dy_fpl }}</text>
          <text>大牌次数:{{ raceDetail.dy_dpcs }}</text>
          <text>大牌率:{{ raceDetail.dy_dpl }}</text>
        </view>
      </view>
      <view style="background: linear-gradient(270deg, #FFFFFF, #D6E4FA);" class="item">
        <view class="user">
          <image src="/static/second.png"></image>
          <view  @click="toUserPage(raceDetail.de_mobile)">
            <image :src="raceDetail.de_image || '/static/cover.png'"></image>

            <text>{{ raceDetail.dier }}</text>
          </view>
          <view>{{ raceDetail.de_pm }}</view>
          <view>{{ raceDetail.de_jifen }}</view>
          <view>{{ raceDetail.de_defen }}</view>
        </view>
        <view class="count">
          <text>放炮数:{{ raceDetail.de_fps }}</text>
          <text>放炮率:{{ raceDetail.de_fpl }}</text>
          <text>大牌次数:{{ raceDetail.de_dpcs }}</text>
          <text>大牌率:{{ raceDetail.de_dpl }}</text>
        </view>
      </view>
      <view style="background: linear-gradient(270deg, #FFFFFF, #FBD6D8);" class="item">
        <view class="user">
          <image src="/static/third.png"></image>
          <view  @click="toUserPage(raceDetail.ds_mobile)">
            <image :src="raceDetail.ds_image || '/static/cover.png'"></image>

            <text>{{ raceDetail.disan }}</text>
          </view>
          <view>{{ raceDetail.ds_pm }}</view>
          <view>{{ raceDetail.ds_jifen }}</view>
          <view>{{ raceDetail.ds_defen }}</view>
        </view>
        <view class="count">
          <text>放炮数:{{ raceDetail.ds_fps }}</text>
          <text>放炮率:{{ raceDetail.ds_fpl }}</text>
          <text>大牌次数:{{ raceDetail.ds_dpcs }}</text>
          <text>大牌率:{{ raceDetail.ds_dpl }}</text>
        </view>
      </view>
      <view style="background: linear-gradient(270deg, #FFFFFF, #EAEBEC);" class="item">
        <view class="user">
          <image src="/static/four.png"></image>
          <view  @click="toUserPage(raceDetail.df_mobile)">
            <image :src="raceDetail.df_image || '/static/cover.png'"></image>

            <text>{{ raceDetail.disi }}</text>
          </view>
          <view>{{ raceDetail.df_pm }}</view>
          <view>{{ raceDetail.df_jifen }}</view>
          <view>{{ raceDetail.df_defen }}</view>
        </view>
        <view class="count">
          <text>放炮数:{{ raceDetail.df_fps }}</text>
          <text>放炮率:{{ raceDetail.df_fpl }}</text>
          <text>大牌次数:{{ raceDetail.df_dpcs }}</text>
          <text>大牌率:{{ raceDetail.df_dpl }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.race-detail {
  min-height: 100vh;
  width: 100vw;
  background-color: #fff;

  .ranking {
    padding: 24rpx 40rpx 0 40rpx;
    display: flex;
    flex-direction: column;

    .item {
      width: 670rpx;
      //height: 180rpx;
      background: linear-gradient(270deg, #FFFFFF, #FBEED9);
      border-radius: 16rpx;
      margin-bottom: 17rpx;
      padding: 28rpx 0 28rpx 30rpx;
      display: flex;
      flex-direction: column;

      .count {
        padding-right: 27rpx;
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .user {
        display: flex;
        align-items: center;

        > view {
          &:nth-of-type(4) {
            font-family: Arial;
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;
          }

          &:nth-of-type(2), &:nth-of-type(3) {
            width: 127rpx;
            font-family: Arial;
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;
          }

          &:nth-of-type(1) {
            display: flex;
            width: 226rpx;
            align-items: center;

            text {
              width: 88rpx;
             /* white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;*/
              font-weight: 400;
              font-size: 30rpx;
              color: #333333;
            }

            image {
              width: 60rpx;
              height: 60rpx;
              border-radius: 50%;
              margin-right: 19rpx;
            }
          }
        }

        > image {
          width: 40rpx;
          height: 50rpx;
          margin-right: 44rpx;
        }
      }
    }

    .title {
      display: flex;
      align-items: center;
      margin-bottom: 19rpx;

      text {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
      }

      text:nth-of-type(5) {
        flex-grow: 1;
      }

      text:nth-of-type(4) {
        width: 127rpx;
      }

      text:nth-of-type(3) {
        width: 127rpx;
      }

      text:nth-of-type(2) {
        width: 214rpx;
      }

      text:nth-of-type(1) {
        width: 120rpx;
        padding-left: 27rpx;
      }
    }
  }

  .desc {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #F5F5F5;
    padding: 30rpx 40rpx;
    justify-content: space-between;

    .time {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        margin-top: 18rpx;
        width: 141rpx;
        height: 124rpx;
      }

      text {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }
    }

    .count {
      display: flex;
      flex-direction: column;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      gap: 21rpx;
    }
  }
}
</style>
